<template>
	<view>
		<view @touchmove.stop.prevent :class="isshowpopup ? 'shade' : ''" @click="coles"></view>
		<view class="header">
			<view class="back" @click="back">
				<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/1bc7a202210081603105008.png" mode=""></image>
			</view>
			<view class="shippingaddress">收货地址</view>
			<view class="addressmag">
				<view class="" @click="shippingAddress">
					<text class="msg">{{ addressFrom.real_name }}</text>
					<text class="msg">{{ addressFrom.phone }}</text>
					<view class="address">地址：{{
							addressFrom.province == undefined ? '请选择地址' : addressFrom.province + '' + addressFrom.city + '' + addressFrom.district + '' + addressFrom.detail
						}}</view>
				</view>
				<view class="">
					<image @click="shippingAddress"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/b11e4202210081556078759.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="allcontent">
			<view class="content" v-for="(i, inx) in orderList" :key="inx">
				<view class="">
					<view class="storetitle" v-if="i.suppliers.length != 0">
						<image src="http://www.szzn.group/uploads/20221107/227f9c901202e18708a0c2e351894951.png"
							mode=""></image>
						<text>{{ i.suppliers.title }}</text>
					</view>
					<view class="" v-for="(item, index) in i.cartInfo" :key="index">
						<view class="shoppingmsg" >
							<view class="shoppingone">
								<view class="">
									<image :src="item.productInfo.image" mode=""></image>
								</view>
								<view class="">
									<view class="title">{{ item.spec.sku }}</view>
									<view class="subtitle"></view>
									<view class="price">
										<view class="">
											<text>￥{{ item.spec.price }}</text>
										</view>
										<view class="shopingnum">x{{ item.cart_num }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="memberdiscount1">
							<view class="">会员折扣</view>
							<view class="memberprice">
								￥{{parseFloat(item.truePrice) - parseFloat(item.spec.price)}}</view>
						</view>

						<view class="shoppingprice">
							<view class="shoppingprice-one">
								<view class="">商品实付金额</view>
								<view class="actuallypaid">￥{{ item.truePrice }}</view>
							</view>

							<!-- <view class="shoppingprice-tow">
							<view class="">运费</view>
							<view class="freight">￥</view>
						</view> -->
						</view>
					</view>
					<!-- <view class="memberdiscount">
						<van-cell-group>
							<van-field :value="mark" label="留言" type="textarea" placeholder="请输入留言" autosize
								:border="false" />
						</van-cell-group>
					</view> -->
				</view>
			</view>
			<view class="zbottom" @click="open">
				<view class="">商家优惠</view>
				<view class="memberprice">
					<text v-if="youhuiID == ''" style="font-size: 28rpx;">请选择优惠券</text>
					<text v-else>￥{{ -parseInt(youhuiPrice) }}</text>
				</view>
			</view>
		</view>
		<view class="fooder">
			<view class="fooder-msg">
				<view class="">合计：</view>
				<view class="">
					<text>￥</text>
					{{ orderList[0].priceGroup.totalPrice - parseFloat(youhuiPrice) }}
				</view>
				<view class="" @click="pay">提交订单</view>
			</view>
		</view>

		<view class="popul" v-if="isshowpopup">
			<view class="detail">优惠详情</view>
			<view class="list">
				<scroll-view scroll-y="true" class="heig" v-if="youhui.length != 0">
					<view :class="youhuiID == item.id ? 'active-style' : ''" class="kkk" v-for="(item, index) in youhui"
						:key="item.id" @click="onchnm(item.id, item.coupon_price)">
						<view class="left">
							<text class="fuhao">￥</text>
							<text class="price">{{ parseInt(item.coupon_price) }}</text>
						</view>
						<view class="right">
							<view class="title">【体验券】{{ item.coupon_title }}</view>
							<view class="time">{{ item.end_time }}前可用</view>
						</view>
						<view class="gouxuan" v-if="youhuiID == item.id">
							<image src="https://www.szzn.group/uploads/20221122/a87c3aa17d290a4bb212f32ff7a3ab7a.png"
								mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="zanwuy" v-if="youhui.length == 0">
				<view class="">暂无优惠券</view>
			</view>
			<view class="fooder" @click="config">
				<view class="">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shoppingCartNotarize,
		payOrder,
		myCoupons,
		updateShoppingCount,
		defaultAddress,
		homeSuerOrder,
		homeSubmit,
		homeShenchenOrder
	} from '@/api/api.js';
	export default {
		data() {
			return {
				isshowpopup: false,
				orderList: [],
				productPrice: 0, //产品小计
				actuallypaid: 0, //实际支付,
				member: 0, // 会员折扣
				allPrice: 0, // 合计
				posttag: '', // 运费
				orderkey: '', //订单密钥
				mark: '', // 备注信息
				addressFrom: '', //默认地址,
				allPosttag: 0,
				orderKey: '',
				youhui: [],
				youhuiID: '',
				youhuiPrice: '',
				orderId:'',
				addObj:''
			};
		},
		onLoad(options) {
			this.orderId = options.cardId
			this.addObj = options.addObj
			uni.showLoading({})
			let time = setTimeout(() => {
				this.shoppingCartNotarizeNew(options.cardId);
			}, 200);
			this.defaultAddress();
			this.myCoupons();
		},
		onShow() {
			this.defaultAddress();
			this.myCoupons();
		},
		computed: {},
		methods: {
			coles() {
				this.isshowpopup = false;
			},
			open() {
				this.isshowpopup = true;
			},
			onchnm(id, price) {
				if (parseFloat(price) > parseFloat(this.allPrice))
					return uni.showToast({
						title: '不满足使用条件',
						duration: 1000,
						icon: 'error'
					});
				this.youhuiID = id;
				this.youhuiPrice = price;
			},
			config() {
				this.isshowpopup = false;
			},
			myCoupons() {
				let data = `page=${1}&limit=${500}&status=${0}`;
				myCoupons(data).then(res => {
					this.youhui = res.data.data;
				});
			},
			// 获取默认地址
			defaultAddress() {
				defaultAddress().then(res => {
					if(this.addObj == undefined){
						defaultAddress().then(res => {
							if (res.data.code == '200') {
								this.addressFrom = res.data.data;
							}
						});
					}else {
						this.addressFrom = JSON.parse(this.addObj)
					}
				});
			},

			// 返回
			back() {
				uni.navigateBack();
			},
			// 去收货地址
			shippingAddress() {
				uni.navigateTo({
					url: `/myIndex/address/address?orderId=${this.orderId}&liwai=${100}`
				});
			},
			operation(type, item) {
				if (type == 1) {
					item.cart_num++;
					this.productPrice = item.productInfo.price * item.cart_num;
					let data = `cartId=${item.id}&cartNum=${item.cart_num}`;
					updateShoppingCount(data).then(res => {});
				} else {
					if (item.cart_num == 1) return;
					item.cart_num--;
					this.productPrice = item.productInfo.price * item.cart_num;
					let data = `cartId=${item.id}&cartNum=${item.cart_num}`;
					updateShoppingCount(data).then(res => {});
				}
			},
			// 立即购买
			shoppingCartNotarizeNew(id) {
				let data = `cartId=${id}&is_new=${1}&group_id=${4}`;
				homeSuerOrder(data).then(res => {
					if (res.data.code == '200') {
						uni.hideLoading()
						this.orderList = res.data.data.cartInfo;
						this.allPrice = this.orderList[0].priceGroup.totalPrice
						this.orderKey = res.data.data.orderKey;
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
					}
				});
			},

			pay() {
				let that = this;
				uni.showLoading({
					title: '加载中'
				});

				let data = {
					special_id: this.addressFrom.id,
					pay_type_num: 40,
					payType: 'weixin',
					from: 'weixin',
					useGold: false,
					key: that.orderKey,
					mark: this.mark,
					price_id:  this.youhuiID?this.youhuiID:0,
					group_id: 4
				};
				homeShenchenOrder(data).then(res => {
					if (res.data.code == '200') {
						uni.hideLoading();
						let obj = res.data.data.result.jsConfig;
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							appId: obj.appid,
							timeStamp: obj.timestamp, // 时间戳
							nonceStr: obj.nonceStr, // 随机字符串
							package: obj.package,
							signType: obj.signType, // 签名算法
							paySign: obj.paySign, // 签名
							success: function(red) {
								uni.reLaunch({
									url: '/page_shoppingcart/paysucceed/paysucceed?orderId=' +
										res.data.data.result.orderId
								});
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									duration: 2000,
									icon:'error'
								});
								let time = setTimeout(() => {
									uni.reLaunch({
										url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' +
											res.data.data.result.orderId
									});
								}, 500);
							}
						});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
					}
				});
			},
			// 提交订单
			submitOrder() {
				let that = this;
				let data = {
					special_id: this.addressFrom.id,
					pay_type_num: 40,
					payType: 'weixin',
					from: 'weixin',
					useGold: false,
					key: this.orderkey,
					mark: this.mark,
					link_pay_uid: '',
					price_id: this.youhuiID?this.youhuiID:0,
					group_id: 3
				};
				payOrder(data).then(res => {
					if (res.data.code == '200') {
						let obj = res.data.data.result.jsConfig;
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							appId: obj.appid,
							timeStamp: obj.timestamp, // 时间戳
							nonceStr: obj.nonceStr, // 随机字符串
							package: obj.package,
							signType: obj.signType, // 签名算法
							paySign: obj.paySign, // 签名
							success: function(red) {
								uni.reLaunch({
									url: '/page_shoppingcart/paysucceed/paysucceed?orderId=' +
										res.data.data.result.orderId
								});
							},
							fail: function(err) {
								uni.reLaunch({
									url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' +
										res.data.data.result.orderId
								});
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.header {
		background-color: #282828;
		height: 400rpx;
		position: relative;
		padding: 10rpx 30rpx;
		font-size: 26rpx;

		image {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.back {
		position: fixed;
		top: 7%;
		left: 7%;
		color: #fff;
		font-size: 34rpx;
	}

	.shippingaddress {
		margin-top: 200rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.addressmag {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.msg {
		display: inline-block;
		padding: 10rpx 0;
	}

	.address {
		width: 600rpx;
		padding: 10rpx 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.allcontent {
		background-color: #fafafa;
	}

	.content {
		padding: 25rpx 25rpx 10rpx;
		// height: 100%;
		margin-bottom: 20rpx;
		// background-color: #fff;
	}

	.content:last-child {
		padding: 25rpx 25rpx 150rpx !important;
	}

	.shoppingmsg {
		background-color: #fff;
		// border-radius: 20rpx;
		padding: 10rpx 30rpx;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 15rpx;
			margin-right: 30rpx;
		}

		.title {
			font-weight: 700;
			font-size: 30rpx;
			width: 470rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.subtitle {
			font-size: 26rpx;
			color: #ccc;
			margin: 5rpx 0 20rpx 0;
		}

		.price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 40rpx;

			text {
				font-size: 26rpx;
			}
		}

		.shopingnum {
			font-size: 26rpx;
			color: #ccc;
		}
	}

	.shoppingone {
		display: flex;
		border-bottom: 1px solid #eee;
		padding: 20rpx 0 40rpx;
	}

	.shoppingtow {
		padding: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.calculatecount {
		display: flex;
		align-items: center;
	}

	.symbol {
		font-size: 50rpx;
	}

	.number {
		background-color: #fafafa;
		padding: 5rpx 35rpx;
		margin: 0 20rpx;
	}

	.last {
		padding: 50rpx 0 15rpx;
		text-align: right;

		text {
			font-weight: 700;
			font-size: 34rpx;
		}

		.allcount {
			font-size: 30rpx;
			color: #ccc;
			font-weight: 400;
			display: inline-block;
			margin-right: 15rpx;
		}
	}

	.memberdiscount {
		// margin-top: 20rpx;
		background-color: #fff;
		font-size: 32rpx;
		// padding: 30rpx 20rpx;
		// border-radius: 0 0 20rpx 20rpx;
		// display: flex;
		// justify-content: space-between;
	}

	.memberdiscount1 {
		// margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.memberprice {
		color: #d5827b;
	}

	.shoppingprice {
		// margin-top: 20rpx;
		background-color: #fff;
		// border-radius: 20rpx;

		.shoppingprice-one {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			padding: 30rpx 20rpx;
		}

		.shoppingprice-tow {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
		}
	}

	.actuallypaid {
		font-size: 36rpx;
		font-weight: 700;
	}

	.freight {
		color: #ccc;
		font-size: 28rpx;
	}

	.leave {
		width: 100rpx;
	}

	textarea {
		height: 60rpx;
		font-size: 28rpx;
	}

	.fooder {
		position: fixed;
		bottom: 0;
		z-index: 10;
	}

	.fooder-msg {
		z-index: 10;
		height: 140rpx;
		background-color: #fff;
		display: flex;
		width: 750rpx;
		justify-content: flex-end;
		align-items: center;

		>view:nth-child(1) {}

		>view:nth-child(2) {
			font-size: 44rpx;
			color: #337959;
			margin: 0 20rpx;
			font-weight: 700;

			text {
				font-size: 26rpx;
			}
		}

		>view:nth-child(3) {
			background-color: #289958;
			color: #fff;
			padding: 20rpx 50rpx;
			font-size: 28rpx;
			border-radius: 50px;
			margin-right: 30rpx;
		}
	}

	.storetitle {
		background-color: #fff;
		padding: 25rpx;
		border-radius: 20rpx 20rpx 0 0;

		image {
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			margin: -5rpx 5rpx 0 0;
		}
	}

	.zbottom {
		margin: 0 25rpx;
		border-radius: 20rpx 20rpx 0 0;
		padding: 15rpx 20rpx 160rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}

	.memberprice {
		color: #d5827b;
	}

	.popul {
		position: fixed;
		width: 100vw;
		bottom: 0;
		left: 0;
		height: 1000rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 11;
		padding: 20rpx 0;

		.detail {
			display: flex;
			justify-content: center;
		}

		.list {
			padding: 10rpx 20rpx;
			margin: 0 20rpx;
		}

		.fooder {
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;

			view {
				width: 500rpx;
				text-align: center;
				padding: 15rpx;
				background-color: #00b26a;
				color: #fff;
				border-radius: 50px;
				font-size: 28rpx;
			}
		}
	}

	// 遮罩层
	.shade {
		position: fixed;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10;
	}

	.active-style {
		border: 1px solid red !important;
		border-radius: 10rpx;
	}

	.zanwuy {
		display: flex;
		justify-content: center;
		color: #ccc;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.heig {
		height: 800rpx;
	}

	.kkk {
		display: flex;
		align-items: center;
		background-color: #fff;
		position: relative;
		height: 110rpx;
		padding: 10rpx 5rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;

		.gouxuan {
			background-color: red;
			border-radius: 0 9rpx 0 10rpx;
			position: absolute;
			right: 0;
			top: 0;
			width: 30rpx;
			height: 35rpx;
			line-height: 35rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.left {
			width: 150rpx;
			text-align: center;
			color: #f55;

			.fuhao {
				font-size: 24rpx;
			}

			.price {
				font-size: 46rpx;
				font-weight: 700;
			}
		}

		.right {
			.title {
				font-size: 28rpx;
				font-weight: 700;
			}

			.time {
				font-size: 24rpx;
				color: #777;
				margin: 10rpx 0 0 10rpx;
			}
		}
	}

	.zanwuy {
		display: flex;
		justify-content: center;
		color: #ccc;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	::v-deep .van-field__label {
		font-size: 32rpx;
		margin-left: -10rpx;
		color: #2d2d2d;
		width: 100rpx;
	}
</style>
